<template>
  <div>
    <!-- 选择 -->
    <div class="image-list">
      <div>
        <draggable
          ref="draggableRef"
          :list="fileList"
          class="img-box"
          draggable=".item"
          ghost-class="ghost"
          chosen-class="chosenClass"
          animation="300"
          @start="onStart"
          @end="onEnd"
        >
          <template #item="{ element, index }">
            <div class="item">
              <el-image
                :src="getImageUrl(element)"
                class="img"
                :preview-src-list="[getImageUrl(element)]"
                fit="contain"
              />
              <div class="operate">
                <div class="preview" @click="openPreview(getImageUrl(element))">
                  <el-icon color="#fff"><CirclePlus /></el-icon>
                </div>
                <div class="delete" @click.stop="handleDelete(index)">
                  <el-icon color="#fff"><Delete /></el-icon>
                </div>
              </div>
            </div>
          </template>
          <template #footer>
            <!-- 选择图片 -->
            <div
              class="image-select-item"
              v-if="props.limit > fileList.length"
              @click="openPicker"
            >
              <el-icon><Plus /></el-icon>
            </div>
          </template>
        </draggable>
      </div>
    </div>

    <!-- 图库 -->
    <picker
      ref="pickerRef"
      @confirm="pickerConfirm"
      :limit="props.limit"
    ></picker>
    <!-- 预览 -->
    <el-image-viewer
      v-if="state.showImagePreview"
      :url-list="state.previewList"
      hide-on-click-modal
      teleported
      @close="closePreview"
      style="z-index: 3000"
    />
  </div>
</template>
  <script setup>
import { reactive, ref, watch, nextTick, onMounted } from "vue";

import draggable from "vuedraggable";
import picker from "./picker.vue";
import appStore from "@/lnk/admin/store/app";

const emit = defineEmits(["update:modelValue", "success"]);
const props = defineProps({
  modelValue: {
    type: [Array, String, Object],
    default() {
      return "";
    },
  },
  // 文件类型:image,file
  fileType: {
    type: String,
    default() {
      return "image";
    },
  },

  // 限制数量
  limit: {
    type: [Number, String],
    default() {
      return 1;
    },
  },
});

const state = reactive({
  showImagePreview: false,
  previewList: [],
});

const pickerRef = ref([]);

// 图片
const fileList = ref([]);
// 拷贝（）
const modelValueCopy = ref(props.modelValue);
//
const draggableRef = ref();
watch(
  modelValueCopy,
  (val) => {
    console.log(99, val, props.modelValue);
    let arr = Array.isArray(val)
      ? val
      : val == "" || val == undefined
      ? []
      : [val];
    arr.forEach(function (item, index) {
      arr[index] = item.replace(appStore.state.config.oss_domain, "");
    });
    fileList.value = arr;
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  nextTick(function () {});
});

/**
 * 获取图片完整地址
 * @param {*} uri
 */
const getImageUrl = (uri) => {
  let oss_domain = appStore.state.config.oss_domain;

  return uri ? `${oss_domain}${uri}` : "";
};

const openPicker = () => {
  pickerRef.value.open();
};

const pickerConfirm = (value) => {
  console.log(222, value);
  value.forEach((element) => {
    fileList.value.push(element.uri);
  });

  if (props.limit == 1) {
    console.log(66, fileList.value[0]);
    emit("success", fileList.value[0]);
  } else {
    emit("success", fileList);
  }
};

// 删除
const handleDelete = (index) => {
  fileList.value.splice(index, 1);
};

function onSuccess(value) {
  emit("update:modelValue", value);
}

function openPreview(row) {

  state.previewList = [row];
  document.body.style.overflow = "hidden";
  state.showImagePreview = true;
}
function closePreview() {
  state.showImagePreview = false;
  document.body.style.overflow = "auto";
}

//拖拽开始的事件
const onStart = () => {
  // console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  // console.log("结束拖拽");
};
</script>
  <style lang="scss" scoped>
.image-list {
  display: flex;

  .img-box {
    display: flex;
    flex-wrap: wrap;

    .item {
      height: 80px;
      width: 80px;
      overflow: hidden;
      position: relative;
      background: var(--el-fill-color-light);
      border-radius: 8px;

      .img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        display: inline-block;
      }
      &:nth-of-type(n) {
        margin: 0 10px 10px 0px;
      }
      &:hover {
      .operate {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
      }
      }
    }

    .image-select-item {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px var(--el-border-color) dashed;
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }

    .ghost {
      border: solid 1px rgb(19, 41, 239);
    }
    .chosenClass {
      background-color: #f1f1f1;
    }
  }
}
</style>
    
    